<template>
	<view class="userinfo">
		<view class="namel">
			<u--text
			    :text="name"
			    size="48rpx"
			    color="#3D3D3D"
				align="center"
				margin="80rpx 0 28rpx"
			/>
			<u--text
			    :text="'共'+total+'人参与'"
			    size="32rpx"
			    color="#969696"
			    align="center"
			/>
		</view>
		<view class="turn">
			<view class="turn_bg flex_wrap row_middle row_center">
				<view class="turn_bg1">
					<u--text
					    :text="namePath"
					    size="40rpx"
					    color="#fff"
					    align="center"
						margin="140rpx 0 20rpx"
					/>
					<u--text
					    :text="phonePath"
					    size="40rpx"
					    color="#fff"
					    align="center"
					/>
				</view>
			</view>
			<u--text
				:text="nowStatus == 1 ? '本次中奖者' : '幸运儿是谁呢~'"
			    size="32rpx"
			    color="#777"
			    align="center"
			/>
		</view>
		<view class="btn" v-if="nowStatus !== 1" @click='praiseMe'>点击增加好运</view>
		<view :animation="animationData" class="praise-me animation-opacity" >+1</view>
		
		<view style="position: absolute;width: 100%;" v-if="firstDrawName">
		    <u-notice-bar bgColor="#FEF0F0" color="#F56C6C " :text="'上一次['+firstDrawName+']中奖者'+firstDrawUserName" mode="closable"></u-notice-bar>
		</view>
	</view>
</template>

<script>
	import {
		listSignInByMeetId,
		drawALottery
	} from "@/api/salesmanMeeting.js";
	import { listCustomerSignInByMeetId,recentlyDrawALottery} from '@/api/sign_in.js';
	export default {
		data() {
			return {
				name:'',
				salesmanId:'',
				userInfoList:[],
				Path:'未知',
				title: '开始抽奖',
				isRunning: false,
				userInfo: {},
				namePath:'点击增加幸运值',
				phonePath:'--',
				nameLists : [],
				phoneLists:[],
				total:'',
				prizeDrawId:'',
				firstDrawName:'',
				firstDrawUserName:'',
				nowStatus:'',
				animationData: {}, //动画实例初始化
			};
		},
		onLoad(options) {
			console.log(options,'op>>>')
			this.meetId = options.meetId;
			this.prizeDrawId = options.prizeDrawId;
			this.getMeetUserList(this.meetId)
			this.drawALotteryName(this.meetId)
			//页面加载时创建一个动画
			this.animation = uni.createAnimation();
		},
		onShow() {
			this.timer1 = setInterval((function() {
				this.drawALotteryName1(this.meetId)
			}).bind(this), 1500);
		},
		onReady() {},
		methods: {
			praiseMe(){
				//点击时，描绘动画的运动过程
				this.animation.translateY(-80).opacity(1).step({duration: 500});
				this.animationData = {};  //必须要清空，如果没有清空，引用是一样的，页面就不会重新渲染，导致动画无法显示。vue的特性
				this.animationData = this.animation.export();  //导出动画，对应的键是当前数据的ID
				setTimeout(()=>{  //时间到后，动画恢复原点
						this.animation.translateY(0).opacity(0).step({duration: 0})
						this.animationData = {};
						this.animationData = this.animation.export();
				},500);
			},
			async getMeetUserList(meetId) {
			    await listCustomerSignInByMeetId(meetId).then((res) => {
				   this.userInfoList = res.data;
				   this.total = res.data.length
				   this.nameLists = this.userInfoList.map(item => item.nickName);
				   this.phoneLists = this.userInfoList.map(item => item.mobile);
			    });
			},
			drawALotteryName(meetId) {
				recentlyDrawALottery(meetId,2)
					.then((res) => {
					this.name = res.data[0].name
					this.nowStatus = res.data[0].status //0:待开奖，1:已开奖
					this.firstDrawUserName = res.data[1].customerName || ''
					this.firstDrawName = res.data[1].name || ''
					console.log(this.nowStatus,'this.nowStatus>>')
					if(this.nowStatus == 2){
						if (!this.timer) {
							this.timer = setInterval((function() {
								this.change()
							}).bind(this), 50);
						}
					}else if(this.nowStatus == 1){
						console.log('11111')
						this.namePath =  res.data[0].customerName || '微信用户'
						this.phonePath =  res.data[0].customerPhone || '--'
						if (this.timer) {
							 clearInterval(this.timer);
							 this.timer= null;
						}
					}
				})
			},
			drawALotteryName1(meetId) {
				recentlyDrawALottery(meetId,2)
					.then((res) => {
					this.name = res.data[0].name
					this.nowStatus = res.data[0].status //0:待开奖，1:已开奖
					if(this.nowStatus == 1){
						this.namePath =  res.data[0].customerName || '微信用户'
						this.phonePath =  res.data[0].customerPhone || '--'
						if (this.timer) {
						     clearInterval(this.timer);
						     this.timer= null;
						}
						// clearInterval(this.timer1);
					}else if(this.nowStatus == 2){
						if (!this.timer) {
							this.timer = setInterval((function() {
								this.change()
							}).bind(this), 50);
						}
					}
				})
			},
			change(e) {
				console.log(this.nowStatus,'this.nowStatus>>')
				if(this.nowStatus == 1){
					clearInterval(this.timer);
				}
				let Index = Math.ceil(Math.random() * 5) //运用random随机数自动随机生成index的下标
				this.namePath = this.nameLists[Index]
				this.phonePath = this.phoneLists[Index]
			},
		},
	};
</script>
<style>
	page {
		background-color: #fff !important;
	}
</style>

<style lang="scss" scoped>
	/* pages/Second/Second.wxss */
	.userinfo {
		flex-direction: column;
		align-items: center;
		display: flex;
		position: relative;
		background-color: #F5F5F5 ;
		padding: 0 32rpx 32rpx;
		height: 100vh;
	}
	.btn{
		width: 634rpx;
		height: 92rpx;
		background: #588BF3;
		border-radius: 40000rpx 40000rpx 40000rpx 40000rpx;
		margin-top: 96rpx;
		text-align: 36rpx;
		color: #fff;
		text-align: center;
		line-height: 92rpx;
	}
	.praise-me {
		font-size: 48rpx;
		color: #fff;
		align-self: center;
		position: absolute;
		bottom: 200rpx;
	}
	.animation-opacity{
		font-weight: bold;
		color: #588BF3;
		opacity: 0;   /* 备注： 默认透明度为 0，不显示 */
	}
	
	.namel {
		width: 100%;
		height: 290rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx solid #EDEDED;
		margin-top: 32rpx;
	}
	.turn{
		width: 100%;
		height: 750rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx solid #EDEDED;
		margin-top: 24rpx;
		&_bg{
			width: 408rpx;
			height: 408rpx;
			background: rgba(22,130,255,0.2);
			border-radius: 50%;
			margin: 84rpx auto 36rpx;
		}
		&_bg1{
			width: 380rpx;
			height: 380rpx;
			background: #588BF3;
			border-radius: 50%;
		}
	}
	// .namel {
	// 	margin-top: 280rpx;
	// }
	// .name {
	// 	margin-top: 230rpx;
	// 	width: 536rpx;
	// 	height: 170rpx;
	// 	text-align: center;
	// 	background-image: url("https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/04/17/f4758ba8875c49c489decc6b0ef5afd9.png");
	// 	background-repeat: no-repeat;
	// 	background-size: 100% 100%;
	// 	font-size: 52rpx;
	// 	color: #FF1E06;
	// 	line-height: 160rpx;
	// }
</style>